<script setup lang="ts">
import axios from 'axios'
import * as echarts from 'echarts/core'
import { onMounted, ref } from 'vue'
import { MapChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import type {
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineSeriesOption
} from 'echarts/charts'
import type {
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption
} from 'echarts/components'
import type { ComposeOption } from 'echarts/core'

type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  MapChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])

const map = ref()

onMounted(() => {
  init()
})

const init = () => {
  const mapChart = echarts.init(map.value)

  axios.get('/src/assets/json/map.json').then((res) => {
    const { status, data } = res
    if (status === 200) {
      echarts.registerMap('map', data)
      console.log(data)
      const mapOption: ECOption = {
        tooltip: {
          show: true
        },
        geo: [
          {
            map: 'map',
            roam: false,
            selectedMode: true,
            itemStyle: {
              color: 'green'
            },
            emphasis: {
              label: {
                show: true
              }
            },
            select: {
              itemStyle: {
                color: '#b50205'
              },
              label: {
                show: true
              }
            },
            regions: [
              {
                name: '红寺堡区',
                itemStyle: {
                  areaColor: 'red',
                  color: 'red',
                  borderWidth: 2,
                  borderType: [10, 5],
                  borderDashOffset: 5
                },
                label:{
                    show:true
                },
                selected: true
              }
            ]
          }
        ],
        grid: {
          top: 10,
          left: 'center',
          width: 80,
          height: 20
        },
        xAxis: {
          axisLine: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false }
        },
        yAxis: {
          axisLine: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false }
        }
      }
      mapChart.setOption(mapOption)
    }
  })
  window.addEventListener('resize', function () {
    mapChart.resize()
  })
}
</script>
<template>
  <div class="title">红寺堡景点数据</div>
  <div ref="map" style="height: 80vh; width: 80vw; margin: auto"></div>
</template>
<style scoped>
.title {
  font-size: 30px;
  text-align: center;
}
</style>
